<template>
  <div class="sales-report-container">
    <el-card>
      <h2 class="my-title">销售统计报表</h2>
      <el-date-picker v-model="month" type="month" placeholder="选择月份" @change="loadReport" style="margin-bottom: 20px"/>
      <div id="sales-chart" style="width: 100%; height: 400px;"></div>
      <div id="hot-chart" style="width: 100%; height: 400px; margin-top: 40px;"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      month: '',
      salesData: [],
      hotData: []
    }
  },
  methods: {
    loadReport() {
      // 假设后端接口 /order/salesStat?month=2024-07
      this.$http.get('/order/salesStat?month=' + (this.month || ''))
        .then(res => {
          if (res.data.code === 2000) {
            this.salesData = res.data.data.sales;
            this.hotData = res.data.data.hot;
            this.renderSalesChart();
            this.renderHotChart();
          }
        });
    },
    renderSalesChart() {
      const chart = echarts.init(document.getElementById('sales-chart'));
      chart.setOption({
        title: { text: '本月每日销售额/订单量' },
        tooltip: { trigger: 'axis' },
        legend: { data: ['销售额', '订单量'] },
        xAxis: { type: 'category', data: this.salesData.map(d => d.day) },
        yAxis: { type: 'value' },
        series: [
          { name: '销售额', type: 'bar', data: this.salesData.map(d => d.amount) },
          { name: '订单量', type: 'line', data: this.salesData.map(d => d.count) }
        ]
      });
    },
    renderHotChart() {
      const chart = echarts.init(document.getElementById('hot-chart'));
      chart.setOption({
        title: { text: '本月热销商品排行' },
        tooltip: {},
        xAxis: { type: 'category', data: this.hotData.map(d => d.name) },
        yAxis: { type: 'value' },
        series: [
          { name: '销量', type: 'bar', data: this.hotData.map(d => d.count) }
        ]
      });
    }
  },
  mounted() {
    this.loadReport();
  }
}
</script>

<style scoped>
.sales-report-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 0;
}
.my-title {
  color: #c09494;
  margin: 0 0 20px 0;
}
</style> 